<template>
  <div class="EditUtils">
    <div class="optionItems">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">
          <div class="first">
            <div class="firstTitle">基础样式</div>
            <div class="selectBtn">
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="尺寸与位置" name="1">
                  <!-- 快捷定位 -->
                  <el-row :gutter="20">
                    <el-col :span="4" style="text-align: right"
                      >快捷定位：</el-col
                    >
                    <el-col :span="20" class="colBtn">
                      <el-button size="mini">左对齐</el-button>
                      <el-button size="mini">右对齐</el-button>
                      <el-button size="mini">上对齐</el-button>
                      <el-button size="mini">下对齐</el-button>
                      <el-button size="mini">垂直居中</el-button>
                      <el-button size="mini">水平居中</el-button>
                    </el-col>
                  </el-row>

                  <!-- 尺寸 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right">尺寸：</el-col>
                    <el-col :span="20" class="input">
                      宽:<el-input size="mini" v-model="widthValue"></el-input>
                      高:<el-input v-model="heightValue" size="mini"></el-input>
                    </el-col>
                  </el-row>

                  <!-- 快捷 -->
                  <el-row :gutter="20" style="margin-top: 10px">
                    <el-col :span="4" style="text-align: right">快捷：</el-col>
                    <el-col :span="20" class="colBtn">
                      <el-button size="mini">满屏</el-button>
                      <el-button size="mini">宽100%</el-button>
                      <el-button size="mini">高100%</el-button>
                    </el-col>
                  </el-row>

                  <!-- 位置 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right">位置：</el-col>
                    <el-col :span="20" class="input2">
                      <div>
                        上:<el-input
                          size="mini"
                          v-model="widthValue"
                        ></el-input>
                        下:<el-input
                          size="mini"
                          v-model="heightValue"
                        ></el-input
                        >如需使用下请设上为auto
                      </div>
                      <div style="margin-top: 10px">
                        左:<el-input
                          size="mini"
                          v-model="widthValue"
                        ></el-input>
                        右:<el-input
                          size="mini"
                          v-model="heightValue"
                        ></el-input
                        >如需使用下请设上为auto
                      </div>
                    </el-col>
                  </el-row>

                  <!-- 旋转 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right">旋转：</el-col>
                    <el-col :span="20" class="input">
                      角度:<el-input
                        size="mini"
                        v-model="widthValue"
                      ></el-input>
                    </el-col>
                  </el-row>

                  <!-- 重叠 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right">重叠：</el-col>
                    <el-col :span="20" class="input">
                      层数:<el-input
                        size="mini"
                        v-model="widthValue"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="边框边距" name="2">
                  <!-- 边框 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right">边框：</el-col>
                    <el-col :span="20" class="input">
                      尺寸:<el-input
                        size="mini"
                        v-model="widthValue"
                      ></el-input>
                      颜色：<el-color-picker
                        v-model="color"
                        size="small"
                        style="margin-right: 10px"
                      ></el-color-picker>
                      样式：
                      <el-select
                        v-model="style"
                        size="mini"
                        placeholder="请选择"
                        style="width: 100px"
                        clearable
                      >
                        <el-option label="实线" value="shanghai"></el-option>
                        <el-option label="虚线" value="beijing"></el-option>
                        <el-option label="点状" value="shanghai1"></el-option>
                        <el-option label="双线" value="beijing2"></el-option>
                      </el-select>
                    </el-col>
                  </el-row>

                  <!-- 边框圆弧 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >边框圆弧：</el-col
                    >
                    <el-col :span="20" class="input">
                      大小:<el-input
                        size="mini"
                        v-model="widthValue"
                      ></el-input>
                    </el-col>
                  </el-row>

                  <!-- 上下边距 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >上下边距：</el-col
                    >
                    <el-col :span="20" class="input">
                      上:<el-input size="mini" v-model="widthValue"></el-input>
                      下:<el-input v-model="heightValue" size="mini"></el-input>
                    </el-col>
                  </el-row>

                  <!-- 左右边距 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >左右边距：</el-col
                    >
                    <el-col :span="20" class="input">
                      左:<el-input size="mini" v-model="widthValue"></el-input>
                      右:<el-input v-model="heightValue" size="mini"></el-input>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="阴影样式" name="3">
                  <!-- 阴影位置 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >阴影位置：</el-col
                    >
                    <el-col :span="20" class="input">
                      水平(上):<el-input
                        size="mini"
                        v-model="widthValue"
                      ></el-input>
                      竖直(右):<el-input
                        v-model="heightValue"
                        size="mini"
                      ></el-input>
                    </el-col>
                  </el-row>

                  <!-- 阴影位置 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >阴影位置：</el-col
                    >
                    <el-col :span="20" class="input">
                      水平(下):<el-input
                        size="mini"
                        v-model="widthValue"
                      ></el-input>
                      竖直(左):<el-input
                        v-model="heightValue"
                        size="mini"
                      ></el-input>
                    </el-col>
                  </el-row>

                  <!-- 阴影颜色 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >阴影颜色：</el-col
                    >
                    <el-col :span="20" class="input">
                      颜色：<el-color-picker
                        v-model="color"
                        size="small"
                        style="margin-right: 10px"
                      ></el-color-picker>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="字体" name="4">
                  <!-- 字体大小 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >字体大小：</el-col
                    >
                    <el-col :span="20" class="input">
                      <el-input size="mini" v-model="widthValue"></el-input>
                    </el-col>
                  </el-row>

                  <!-- 字体粗细 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >字体粗细：</el-col
                    >
                    <el-col :span="20" class="input">
                      <el-input size="mini" v-model="widthValue"></el-input>
                    </el-col>
                  </el-row>

                  <!-- 行间距 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >行间距：</el-col
                    >
                    <el-col :span="20" class="input">
                      <el-input size="mini" v-model="widthValue"></el-input>
                    </el-col>
                  </el-row>

                  <!-- 字间距 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >字间距：</el-col
                    >
                    <el-col :span="20" class="input">
                      <el-input size="mini" v-model="widthValue"></el-input>
                    </el-col>
                  </el-row>

                  <!-- 对齐方式 -->
                  <el-row :gutter="20" style="margin-top: 10px">
                    <el-col :span="4" style="text-align: right"
                      >对齐方式：</el-col
                    >
                    <el-col :span="20" class="colBtn">
                      <el-button size="mini">左对齐</el-button>
                      <el-button size="mini">右对齐</el-button>
                      <el-button size="mini">居中对齐</el-button>
                    </el-col>
                  </el-row>

                  <!-- 字体颜色 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >字体颜色：</el-col
                    >
                    <el-col :span="20" class="input">
                      <el-color-picker
                        v-model="color"
                        size="small"
                        style="margin-right: 10px"
                      ></el-color-picker>
                    </el-col>
                  </el-row>
                </el-collapse-item>
                <el-collapse-item title="背景&&透明度" name="5">
                  <!-- 背景颜色 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >背景颜色：</el-col
                    >
                    <el-col :span="20" class="input">
                      <el-color-picker
                        v-model="color"
                        size="small"
                        style="margin-right: 10px"
                      ></el-color-picker>
                    </el-col>
                  </el-row>

                  <!-- 背景图片 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >背景图片：</el-col
                    >
                    <el-col :span="20" class="input2">
                      <div>
                        <input type="file" name="" id="" />
                      </div>
                      <div style="margin-top: 10px">
                        图片地址:<el-input
                          size="mini"
                          v-model="widthValue"
                          style="width: 300px"
                        ></el-input>
                      </div>
                    </el-col>
                  </el-row>

                  <!-- 背景尺寸 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right">尺寸：</el-col>
                    <el-col :span="20" class="input">
                      宽:<el-input
                        size="mini"
                        v-model="widthValue"
                        placeholder="如:100%"
                      ></el-input>
                      高:<el-input
                        v-model="heightValue"
                        size="mini"
                        placeholder="如:100%"
                      ></el-input>
                    </el-col>
                  </el-row>

                  <!-- 透明度 -->
                  <el-row
                    :gutter="20"
                    type="flex"
                    align="middle"
                    style="margin-top: 10px"
                  >
                    <el-col :span="4" style="text-align: right"
                      >透明度：</el-col
                    >
                    <el-col :span="20" class="input">
                      <el-input size="mini" v-model="widthValue"></el-input>
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth"
          >定时任务补偿</el-tab-pane
        >
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditUtils",
  data() {
    return {
      activeName: "first",
      activeNames: ["5"],
      widthValue: "",
      heightValue: "",
      color: "#000",
      style: "",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="less" scoped>
.EditUtils {
  background-color: #fff;
  .optionItems {
    .first {
      padding: 0 20px;
      .firstTitle {
        font-size: 20px;
      }
      .selectBtn {
        .el-button {
          margin-left: 5px;
        }
        .input {
          display: flex;
          align-items: center;
          .el-input {
            width: 100px;
            // height: 30px;
            margin: 0 20px 0 10px;
          }
        }
        .input2 {
          .el-input {
            width: 100px;
            // height: 30px;
            margin: 0 20px 0 10px;
          }
        }
      }
    }
  }
}
</style>
